<template>
  <div class="goods">
    <a-card :bordered="false">
      <el-row :gutter="12" class="goBusiness">
        <el-col :span="4" v-for="(item, index) in businessTypeList" :key="index">
          <el-card :shadow="(item.businessType == businessType) ? 'always' : 'hover'" style="cursor: pointer">
            <div @click="goBusiness(item.businessType)">
              <h3 style="margin: 0; padding: 10px 0; text-align: center;font-weight:600">{{ item.businessType | businessTypeStatus }}</h3>
            </div>
          </el-card>
        </el-col>
      </el-row>
      <search :keyName="keyName" @search="search" @resetSearch="resetSearch" ref="search" />
      <div class="content">
        <div class="table_caozuoAdd">
          <a-button type="primary" icon="plus" @click="addShangpin">新增商品</a-button>
          <a-button type="primary" icon="tool" @click="save">维护售卖商品</a-button>
        </div>
      </div>
      <a-tabs type="card" @change="callback">
        <a-tab-pane key="01" :tab="tab.approved" :forceRender="true">
          <approved ref="approved" @trigger="trigger" />
        </a-tab-pane>
        <a-tab-pane key="02" :tab="tab.toBeSubmitted" :forceRender="true">
          <toBeSubmitted ref="toBeSubmitted" @trigger="trigger" />
        </a-tab-pane>
        <a-tab-pane key="00" :tab="tab.toBereviewed" :forceRender="true">
          <toBereviewed ref="toBereviewed" @trigger="trigger" />
        </a-tab-pane>
      </a-tabs>
    </a-card>
    <choiceGoods ref="choiceGoods" @getList="getList" />
  </div>
</template>

<script src='./index'></script>

<style lang="less" >
.goods {
  .goBusiness {
    margin: 10px 0;
    .el-card__body {
      padding: 0;
    }
    .el-card.is-always-shadow,
    .el-card.is-hover-shadow:focus,
    .el-card.is-hover-shadow:hover {
      box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.5) !important;
    }
  }
}
</style>